<template>
  <div class="dingbu">
    <!-- 背景 -->
    <div class="cover">
      <van-image class="tupian" round width="7rem" height="7rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
      <span class="title">{{ this.$store.state.uname }}</span>
    </div>
    <!-- 会员 -->
    <div class="vip">
      <div class="bg">
        <img src="../assets/img/logo1.png" style="width: 4rem" />
        <div class="huiyuan">年卡会员</div>
        <p class="fuwu">|</p>
        <p class="fuwu1">服务享9折</p>
        <div class="open">立即开通</div>
      </div>
    </div>
    <div style="position: absolute; top: 28rem; width: 100%">
      <!-- 我的宠物 -->
      <div class="my_pet">
        <div class="name">
          <p class="a" style="color: black">我的宠物</p>
          <router-link style="color: #8c8a99" :to="{ path: '/petfiles', query: { petNumber: petNumber } }">
            <van-icon name="add-o" color="#8c8a99" /> 添加
          </router-link>
        </div>
        <!-- 宠物信息 -->
        <div @click="handelPetInfo(item)" class="pic" v-for="(item, p_id) in petData" :key="p_id">
          <div class="petImg_Name">
            <van-image round width="3.5rem" height="3.5rem" :src="item.p_img" /><span class="myPetName">{{
              item.p_name
            }}</span>
          </div>
          <div class="year">{{ item.p_year }}岁</div>
        </div>
      </div>
      <!-- 加入宠物派 -->
      <div class="takePartIn">
        <p class="list">加入宠物派</p>
        <div class="join">
          <div class="zhuanyuan">
            <div class="j_left">
              <p style="margin-bottom: 1rem">成为伴宠专员</p>
              <van-button round size="normal" color="#ff525b">立即申请</van-button>
            </div>
            <div class="j_right">
              <img src="../assets/img/l1.png" style="width: 12rem" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 入驻寄养 -->
      <div class="join">
        <div class="zhuanyuan1">
          <div class="j_left1">
            <p style="margin-bottom: 1rem">入驻寄养</p>
            <van-button round size="normal" color="#7f05ff">立即申请</van-button>
          </div>
          <div class="j_right1">
            <img src="../assets/img/x1.png" style="width: 12rem" alt="" />
          </div>
        </div>
      </div>
      <!-- 宠物领养 -->
      <div class="join">
        <div class="zhuanyuan2">
          <div class="j_left2">
            <p style="margin-bottom: 1rem">宠物领养</p>
            <van-button round size="normal" color="#ff9600">去看看~</van-button>
          </div>
          <div class="j_right2">
            <img src="../assets/img/l2.png" style="width: 12rem" alt="" />
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="botoom">
        <p>在线客服📞</p>
        <p class="cen">工作时间: 周一至周日 9:00-18:00</p>
        <p>——宠物派 国内首家标准化宠物服务平台——</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  ...mapState['uname'],
  data() {
    return {
      petData: [],
      petNumber: null,
    };
  },
  computed: {},
  methods: {
    // 更改宠物信息
    handelPetInfo(item) {
      console.log(item.p_id);
      this.$router.push({
        name: 'petfileschange', //跳转至 petfiles 路由
        query: {
          p_id: item.p_id,
          p_img: item.p_img,
          p_name: item.p_name,
          p_year: item.p_year,
          p_gender: item.p_gender,
          p_type: item.p_type,
          p_content: item.p_content,
          p_breed: item.p_breed,
        },
      });
      this.$route.query.name;
    },

    // 获取宠物信息
    getPetData() {
      const url = `pet/selectPet`;
      let params = `user_id=${sessionStorage.getItem('UserID')}`;
      this.axios.post(url, params).then(res => {
        console.log(res);
        this.petData = res.data.data;
        // console.log(res.data.data.length);
        this.petNumber = res.data.data.length;
        // console.log(this.petNumber);
      });
    },
  },
  mounted() {
    console.log(this.$store.state.uname);
    this.getPetData();
  },
};
</script>
<style>
/* 样式一 */
.van-hairline--bottom {
  background-color: white;
}
.van-nav-bar__title {
  color: black;
}
.van-nav-bar__text {
  color: black;
}
.van-nav-bar .van-icon {
  color: black;
}
.van-grid-item__content {
  margin-top: -1rem;
}
.cover {
  width: 100%;
  height: 30rem;
  background-color: #fde062;
  position: relative;
}
.tupian {
  position: absolute;
  top: 7rem;
  left: 2rem;
}
.title {
  position: absolute;
  font-weight: bolder;
  font-size: 2rem;
  padding: 1rem;
  text-align: center;
  top: 8.4rem;
  left: 10rem;
}
.vip {
  position: absolute;
  top: 20rem;
  left: 5%;
  width: 90%;
}
.bg {
  background-color: #58525f;
  height: 6rem;
  width: 37rem;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.huiyuan {
  font-size: 1.75rem;
  color: #fde062;
  margin-right: 1rem;
}
.fuwu {
  color: white;
  font-size: 0.5rem;
}
.fuwu1 {
  margin-left: 1rem;
  font-size: 1.25rem;
  color: #e9eaeb;
}
.open {
  color: white;
  font-size: 1.5rem;
  margin-left: 7rem;
}
.my_pet {
  width: 90%;
  margin: 0 auto;
  /* margin-left: 1.25rem; */
  /* width: 35rem; */
  /* height: 12rem; */
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 2px 6px 0 rgba(0, 2, 2, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.pet {
  width: 90%;
  margin: 0 auto;
}
.name {
  /* margin-left: 1.25rem; */
  margin: 0 auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.a {
  font-size: 1.5rem;
  font-weight: bold;
}
.pic {
  margin: 0 auto;
  width: 90%;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
}
.petImg_Name {
  display: flex;
  align-items: center;
}
.myPetName {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  padding-left: 1rem;
}
.year {
  background-color: #f7f6f9;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  line-height: 3rem;
  color: #8c8a99;
  text-align: center;
  /* margin-top: 1rem; */
}

.list {
  font-size: 2rem;
  font-weight: bold;
  margin-left: 2rem;
  padding-top: 3rem;
}
.join {
  width: 90%;
  margin: 1rem auto;
  height: 13rem;
}
.zhuanyuan {
  box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
  border-radius: 1rem;
  background-image: linear-gradient(to right, rgba(255, 159, 172), rgba(255, 114, 121));
  display: flex;
  justify-content: space-between;
}
.j_left {
  margin: 3rem 0 0 1rem;
  font-size: 2rem;
  color: #e9eaeb;
  font-family: '华光细圆_CNKI';
}
.j_right {
  margin: 0 2rem 0 0;
}
.zhuanyuan1 {
  box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
  border-radius: 1rem;
  background-image: linear-gradient(to right, rgba(173, 170, 255), rgba(148, 116, 248));
  display: flex;
  justify-content: space-between;
}
.j_left1 {
  margin: 3rem 0 0 1rem;
  font-size: 2rem;
  color: #e9eaeb;
  font-family: '华光细圆_CNKI';
}
.j_right1 {
  margin: 0 2rem 0 0;
}
.zhuanyuan2 {
  box-shadow: 0 0.4rem 0.8rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
  border-radius: 1rem;
  background-image: linear-gradient(to right, rgba(255, 208, 110), rgba(252, 189, 73));
  display: flex;
  justify-content: space-between;
}
.j_left2 {
  margin: 3rem 0 0 1rem;
  font-size: 2rem;
  color: #e9eaeb;
  font-family: '华光细圆_CNKI';
}
.j_right2 {
  margin: 0 2rem 0 0;
}
.botoom {
  font-size: 1.5rem;
  height: 20rem;
  text-align: center;
  color: #dcdcdc;
  margin-top: 3rem;
}
.cen {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
</style>
